$(function () {
  let id = getQueryString('categoryid');
  let title = getQueryString('title');
  console.log(id);
  console.log(title);
  let $ul = $('.info_contant')
  let $sign = $('.sign');
  let infoStr = ''
  let titleStr = `<a href="" class="sign">${title}></a>`
  $sign.after(titleStr);
  let pageLength
  let page = 1
  let flag = true;
  let $prev = $('.prev');
  let $next = $('.next');
  let $select = $('.page');

  //初始化页面
  let init = {
    url: 'http://chst.vip:1234/api/getproductlist?categoryid=' + id,
    success: function (res) {
      pageLength = Math.ceil((res.totalCount / res.pagesize));
      console.log(pageLength);
      for(let i = 0;i < pageLength;i++){
        let str = ''
        str += `<option value="${i+1}">${i+1}/${pageLength}</option>`
        $select.append(str)
      }
      res.result.forEach(element => {
        let regExp = /^<[^<]+\s+src="([^''""]*)"/
        let imgUrl = element.productImg.match(regExp);
        infoStr += `      
        <li class="content" id="${element.productId}">
          <a href="./priceparityitems.html">
            <div class="img ">
              <img src="${imgUrl[1]}"">
            </div> 
            <div class="infoR">
              <div class="title">
                <h4>${element.productName}</h4>
                <div class="price">${element.productPrice}</div>
              </div>
              <div class="other">
                <span>${element.productQuote}</span>
                <i>${element.productCom}</i>
              </div>
            </div>
          </a>
        </li>`
      });
      $ul.append(infoStr);
      infoStr = ''

      $ul.on('click', 'li', function (e) {
        e.preventDefault();
        window.location.href = "./priceparityitems.html?categoryid=" + id + '&productid=' + $(this).attr('id') + '&name=' + title;
      })
    }
  }
  //请求加载数据方法
  function a(res) {
    $ul[0].innerHTML = "";
    res.result.forEach(element => {
      let regExp = /^<[^<]+\s+src="([^''""]*)"/
      let imgUrl = element.productImg.match(regExp);
      infoStr += `      
    <li class="content" id="${element.productId}">
    <a href="./priceparityitems.html">
        <div class="img ">
          <img src="${imgUrl[1]}"">
        </div> 
        <div class="infoR">
          <div class="title">
            <h4>${element.productName}</h4>
            <div class="price">${element.productPrice}</div>
          </div>
          <div class="other">
            <span>${element.productQuote}</span>
            <i>${element.productCom}</i>
          </div>
        </div>
      </a>
    </li>`
    });
    $ul.append(infoStr);
    infoStr = ""
  }
  ajaxAPI(init);
  //分页开关
  if (flag) {
    //切换下一页
    $next.on('click', function () {
      //改变按钮样式
      $prev.prop('disabled', "").css({
        color: "rgb(51,51,51)"
      })
      //页面 小于 页面数  获取下一页数据
      if (page < pageLength) {
        //页面+1
        page++;
        console.log(page);
        //请求下一页数据
        //请求加载商品数据
        let getData = {
          url: 'http://chst.vip:1234/api/getproductlist?categoryid=' + id + '&pageid=' + page,
          success: a,
        }
        ajaxAPI(getData);
        $select.children().eq(page-1).prop('selected','selected')
        console.log($select.children().eq(page));
      }
      //页面 大于 或等于 页面数 error
      else {
        console.error("1111")
      }
      // 二次判断 若页面数等于页面 改变按钮样式
      if (page === pageLength) {
        $(this).prop('disabled', 'disabled').css({
          color: 'rgb(204,204,204)'
        })
      }
    })
    //切换上一页
    $prev.on('click', function () {
      //改变按钮样式
      $next.prop('disabled', "").css({
        color: "rgb(51,51,51)"
      })
      // 页面 大于 1 获取上一页数据
      if (page > 1) {
        page--;
        console.log(page);
        //请求加载商品数据
        let getData = {
          url: 'http://chst.vip:1234/api/getproductlist?categoryid=' + id + '&pageid=' + page,
          success: a,
        }
        ajaxAPI(getData);
        $select.children().eq(page-1).prop('selected','selected')
        console.log($select.children().eq(page));

      }
      else {
        console.error("1111")
      }
      if (page === 1) {
        $(this).prop('disabled', 'disabled').css({
          color: 'rgb(204,204,204)'
        })
      }
    })

    $select.on('change',function(){
      console.log($select.val());
      page = $select.val();
      console.log(page);
      let getData = {
        url: 'http://chst.vip:1234/api/getproductlist?categoryid=' + id + '&pageid=' + page,
        success: a,
      }
      ajaxAPI(getData);
    })
  }
})
